<template>
  <div class="terminal-container">
    <div class="terminal-header">
      <span class="terminal-title">Terminal</span>
      <div class="terminal-controls">
        <span class="control-button close"></span>
        <span class="control-button minimize"></span>
        <span class="control-button maximize"></span>
      </div>
    </div>
    <div class="terminal-content">
      <div class="terminal-output">
        <span class="info-message"
          >$ echo "Welcome to my terminal,This terminal is developed by html and
          css !"</span
        >
        <template
          v-for="message in useCodeStore.TerminalMessage"
          :key="message.time"
        >
          <div class="success-message" v-if="message.status">
            <span class="value">
              {{ message.runValues }}
            </span>
            <span class="time">{{ message.time }}</span>
          </div>
          <div class="error-message" v-if="!message.status">
            <span class="value">
              {{ message.errorMessage }}
            </span>
            <span class="time">
              {{ message.time }}
            </span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import codeStore from '../store/index.js'
const useCodeStore = codeStore()
</script>

<style scoped>
.terminal-container {
  width: 100%;
  max-width: 100%;
  height: 260px;
  background-color: #1e1e1e;
  color: #d4d4d4;
  font-family: monospace;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #333333;
  color: #ffffff;
  font-weight: bold;
}

.terminal-title {
  font-size: 14px;
}

.terminal-controls {
  display: flex;
  gap: 6px;
}

.control-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ff5f56;
}

.control-button.minimize {
  background-color: #ffbd2e;
}

.control-button.maximize {
  background-color: #27c93f;
}

.terminal-content {
  flex: 1;
  background-color: #1e1e1e;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 确保内容从顶部开始 */
}

.terminal-output {
  font-size: small;
  padding: 0; /* 清除默认的内边距 */
  font-family: monospace;
  color: #d4d4d4;
  white-space: pre-wrap; /* 确保文本不溢出，且自动换行 */
  margin: 0;
}

.info-message {
  color: #9cdcfe;
}

.success-message {
  display: flex;
  flex-direction: column;
  color: #6a9955;
}

.error-message {
  display: flex;
  flex-direction: column;
  color: #f44747;
}
</style>
